<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css" />
		<link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap-theme.min.css" />
		
		<script type="text/javascript" src="./bootstrap-3.4.1-dist/jquery-3.6.0.min.js"></script>
		<script type="text/javascript" src="./bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
	</head>
	<body>
		<div class="container-fluid">
			<div class="row">
				<div class="col-md-2"></div>
				<div class="col-md-2"></div>
				<div class="col-md-2"></div>
			</div>
		</div>
		<table class="table table-condensed table-bordered">
			<thead>
				<tr class="active">
					<th>房号</th>
					<th>手机号</th>
					<th>预订人</th>
					<th>预约时间</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td class="warning">101</td>
					<td class="info">6666666</td>
					<td class="success">王驰</td>
					<td class="danger">22/10/01</td>
					<td>
						<button type="button" class="btn btn-primary btn-mg" data-toggle="modal" data-target="#myModal">
							修改
						</button>
						<button type="button" class="btn btn-primary btn-mg" data-toggle="modal" data-target="#deleteModal">
							删除
						</button>
					</td>
				</tr>
				<tr>
					<td class="warning">103</td>
					<td class="info">23333</td>
					<td class="success">袁总</td>
					<td class="danger">22/10/02</td>
					<td>
						<button type="button" class="btn btn-primary btn-mg" data-toggle="modal" data-target="#myModal">
							修改
						</button>
						<button type="button" class="btn btn-primary btn-mg" data-toggle="modal" data-target="#deleteModal">
							删除
						</button>
					</td>
				</tr>
				<tr>
					<td class="warning">105</td>
					<td class="info">7474741</td>
					<td class="success">白总</td>
					<td class="danger">22/09/02</td>
					<td>
						<button type="button" class="btn btn-primary btn-mg" data-toggle="modal" data-target="#myModal">
							修改
						</button>
						<button type="button" class="btn btn-primary btn-mg" data-toggle="modal" data-target="#deleteModal">
							删除
						</button>
					</td>
				</tr>
				<tr>
					<td class="warning">107</td>
					<td class="info">88888888</td>
					<td class="success">刘总</td>
					<td class="danger">22/10/02</td>
					<td>
						<button type="button" class="btn btn-primary btn-mg" data-toggle="modal" data-target="#myModal">
							修改
						</button>
						<button type="button" class="btn btn-primary btn-mg" data-toggle="modal" data-target="#deleteModal">
							删除
						</button>
					</td>
				</tr>
				<tr>
					<td class="warning">109</td>
					<td class="info">23333333</td>
					<td class="success">杨总</td>
					<td class="danger">22/10/02</td>
					<td>
						<button type="button" class="btn btn-primary btn-mg" data-toggle="modal" data-target="#myModal">
							修改
						</button>
						<button type="button" class="btn btn-primary btn-mg" data-toggle="modal" data-target="#deleteModal">
							删除
						</button>
					</td>
				</tr>
			</tbody>
		</table>
				<div class="modal-body">
					<!-- 模态框：实现教师信息的展示与修改-->
					<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
					    <div class="modal-dialog" role="document">
					        <div class="modal-content">
					            <div class="modal-header">
					                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
					                        aria-hidden="true">&times;</span></button>
					                <!-- 编辑界面的标题-->
					                <h4 class="modal-title" id="myModalLabel"
					                    style="border-left: 5px solid dodgerblue;padding-left: 10px;">修改顾客信息</h4>
					            </div>
					            <div class="modal-body">
					                <!-- 表单（输入组件），从添加复制过来，改一改 -->
					                <form action="/SelectCourse2/teacher/update" method="post" id="myForm">
					                    <!-- 编号，也就是主键ID,修改的时候一定要有这个，并且要设置为不可编辑（readonly）-->
					                    <div class="form-group">
					                        <label for="username">房<span
					                                style="color:transparent;user-select: none;">隐藏</span>号：</label>
					                        <input type="text" class="form-control" name="userId" id="userId" readonly>
					                    </div>
					                   <!-- 电话-->
					                   <div class="form-group">
					                       <label for="phone">电<span style="color:transparent;user-select: none;">隐藏</span>话：</label>
					                       <input type="text" class="form-control" name="phone" id="phone" placeholder="请输入电话">
					                   </div>
					                    <!-- 姓名 -->
					                    <div class="form-group">
					                        <label for="nickname">姓<span
					                                style="color:transparent;user-select: none;">隐藏</span>名：</label>
					                        <input type="text" class="form-control" name="nickname" id="nickname" placeholder="请输入姓名">
					                    </div>
					                    <!-- 时间 -->
					                    <div class="form-group">
					                        <label for="nickname">预约时间：</label>
					                        <input type="text" class="form-control" name="nickname" id="nickname" placeholder="请输入预约时间">
					                    </div>
					                </form>
					            </div>
					            <div class="modal-footer">
					                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					                <button type="button" class="btn btn-primary" id="save-btn">保存</button>
					            </div>
					        </div>
					    </div>
					</div>
				</div>
			</div>
		</div>
		</div>
		<!-- 模态框：实现顾客信息的删除-->
		<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel">
		    <div class="modal-dialog" role="document">
		        <div class="modal-content">
		            <div class="modal-header">
		                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
		                        aria-hidden="true">&times;</span></button>
		                <h4 class="modal-title" id="deleteModalLabel2"
		                    style="border-left: 5px solid dodgerblue;padding-left: 10px;">温馨提示</h4>
		            </div>
		            <div class="modal-body">
		                确定删除该顾客信息？
		                <!-- 这里需要使用隐藏域绑定一个主键编号：所谓隐藏域，就是程序中能够读到，用户却看不见-->
		                <input type="hidden" id="userId2">
		            </div>
		            <div class="modal-footer">
		                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
		                <button type="button" class="btn btn-primary" id="del-btn">确认</button>
		            </div>
		        </div>
		    </div>
		</div>
	</body>
</html>